<template>
  <div>
    <Card>
      <Row>
        <Col span="7">
          <span style="font-size: 17px">车牌号查询：</span>
          <Input v-model="carQuery.carId" placeholder="" style="width: 200px"></Input>
        </Col>
        <Col span="7" style=" margin-bottom: 20px">
          <span style="font-size: 17px">状态：</span>
          <Select v-model="carQuery.status" style="width:200px" size="large">
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="3">
          <Button type="primary" @click="queryList" icon="ios-search" size="large">查询</Button>
        </Col>
        <!--                      #409eff-->
        <Col span="6">
          <Button @click="addCar" style="margin-right: 10px" size="large">单个添加</Button>
          <Button @click="" size="large">批量导入</Button>
        </Col>
      </Row>
      <Content style="margin-left:10px;">
        <Table ref="selection" :loading="loading" :columns="columns1" :data="data1" size="large">
          <template slot-scope="{ row, index }" slot="operation">
            <Button size="small" type="primary" style="margin-right: 20px" @click="show(index)"
                    custom-icon="iconfont icon-edit">
              编辑
            </Button>
            <Button size="small" @click="deleteConfirm(index)" custom-icon="iconfont icon-trash" type="error">删除</Button>
          </template>
        </Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="100" :current="carQuery.currentPage" @on-change="changePage"  @on-page-size-change="changeSize" show-elevator show-sizer></Page>
          </div>
        </div>
      </Content>
    </Card>

    <Modal
      v-model="modal1"
      title="编辑">
      <Form :model="carData" :label-width="80">
        <FormItem label="车牌编号">
          <Input v-model="carData.dccarId" readonly></Input>
        </FormItem>
        <FormItem label="车牌号">
          <Input v-model="carData.dccarLicense" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="车辆类型">
          <Input v-model="carData.dccarAutomaker" placeholder="请输入车辆类型"></Input>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="carData.dccarRemark" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="创建时间">
          <DatePicker v-model="carData.createTime"></DatePicker>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="updateCar" type="primary">更新</Button>
        <Button @click="cancel" type="primary">取消</Button>
      </div>
    </Modal>
    <Modal
      v-model="modal2"
      title="确认删除">
      <p>确定要删除该车辆信息吗</p>
      <div slot="footer">
        <Button @click="deleteCarById_" type="primary">确认</Button>
        <Button @click="cancel2" type="primary">取消</Button>
      </div>
    </Modal>
    <Modal
      v-model="modal3"
      title="编辑">
      <Form :model="carData" :label-width="80">
        <FormItem label="车牌号">
          <Input v-model="carData.dccarLicense" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="车辆类型">
          <Input v-model="carData.dccarAutomaker" placeholder="请输入车辆类型"></Input>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="carData.dccarRemark" placeholder="Enter something..."></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="addANewCar" type="primary">添加</Button>
        <Button @click="cancel3" type="primary">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<script>

import {addNewCar, deleteCarById, getCarById, getCarList, updateCar} from "../../../api/data";

export default {
  name: "car",
  data() {
    return {
      modal1:false,
      modal2:false,
      modal3:false,
      selectIndex:0,
      loading: false,
      carQuery: {
        carId: '',
        status: '1',
        page: '1',
        limit: '10',
      },
      carData:{
        "dccarId": "",
        "dccarLicense": "",
        "dccarAutomaker": "",
        "dccarStatus": "",
        "name": "",
        "dccarRemark": "",
        "createTime": ""
      },
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '车牌号',
          key: 'dccarLicense',
          align: 'center'
        },
        {
          title: '车辆类型',
          key: 'dccarAutomaker',
          align: 'center'
        },
        {
          title: '登记时间',
          key: 'createTime',
          align: 'center'
        },

        {
          title: '状态',
          key: 'dccarStatus',
          align: 'center'
        },
        {
          title: '当前驾驶员',
          key: 'name',
          align: 'center'
        },
        {
          title: '备注',
          key: 'dccarRemark',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'operation',
          width: 300,
          align: 'center'
        }
      ],
      statusList: [
        {
          value: '0',
          label: '空闲'
        },
        {
          value: '1',
          label: '驾驶中'
        }
      ],
      data1: [
      ]
    }
  },
  methods: {
    changePage(pageNumber) {
      this.carQuery.page = pageNumber
      this.queryList()
    },
    changeSize(pageSize) {
      this.carQuery.limit = pageSize
    },
    queryList() {
      getCarList(this.carQuery).then(res => {
        this.data1 = res.data.obj
        this.data1.forEach(item=>{
          if(item.dccarStatus=='1'){
            item.dccarStatus="驾驶中";
          }else{
            item.dccarStatus="空闲中";
          }
          item.createTime=item.createTime[0]+"-"+item.createTime[1]+"-"+item.createTime[2];
        })
      }).catch(err => {
      })
    },
    show(index){
      this.modal1=true;
      getCarById(this.data1[index].dccarId).then(res=>{
        this.carData=res.data.obj;
        this.carData.createTime=res.data.obj.createTime[0]+"-"+res.data.obj.createTime[1]+"-"+res.data.obj.createTime[2];
      }).catch(err=>{

      })
    },
    addCar(){
      this.carData={
        "dccarId": "",
        "dccarLicense": "",
        "dccarAutomaker": "",
        "dccarStatus": 0,
        "name": "",
        "dccarRemark": "",
        "createTime": ""
      }
      this.modal3=true;
    },
    addANewCar(){
      addNewCar(this.carData).then(res=>{
        if (res.data.code==200){
          this.$Message.info("添加成功");
          this.modal3=false;
          this.queryList()
        }
      }).catch(err=>{

      })
    },
    updateCar(){
      updateCar(this.carData).then(res=>{
        if (res.data.code==200){
          this.$Message.info("更新成功");
          this.modal1=false;
          this.queryList()
        }
      }).catch(err=>{

      })
    },
    cancel(){
      this.modal1=false;
    },
    cancel2(){
      this.modal2=false;
    },
    cancel3(){
      this.modal3=false;
    },
    deleteConfirm(index){
      this.modal2=true;
      this.selectIndex=index;
    }
    ,
    deleteCarById_(){
      deleteCarById(this.data1[this.selectIndex].dccarId).then(res=>{
        if (res.data.code==200){
          this.$Message.info("删除成功");
          this.modal1=false;
          this.queryList()
          this.modal2=false;
        }
      }).catch(err=>{
        this.$Message.info("err.message");
      })
    },

  },
  mounted() {
    this.queryList()
  }
}
</script>

<style scoped>

</style>
